<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>  
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>用户登录</title>
	<link href="../image/icon.jpg" rel="icon">
	<link href="../css/bootstrap.css" rel="stylesheet" >
	<script type="text/javascript" src="../js/jquery.js"></script>
	<script type="text/javascript" src="../js/bootstrap.js"></script>
</head>
<body>
	<div class="container">
		<div class="col-md-4"></div>
		<div class="col-md-4">
			<form class="form-signin" id="formId"  method="post">
       			 <h2 class="form-signin-heading" style="color: blue"><b>用户登录</b></h2>
       			 <input type="text" id="userEmail"  name="email" class="form-control"  onblur="checkNameAndPass()" placeholder="请输入用户名" ><br/>
        		 <input type="password" id="userPass" name="pass" class="form-control"  onblur="checkNameAndPass()" onkeyup="checkNameAndPass()" placeholder="请输入密码" >
        		 <div class="checkbox">
          			<label style="color: #8A2BE2">
           			 	<input type="checkbox" name="rememberUser" value="rememberUser">记住密码
          			</label>
       		     </div>
        		 <button class="btn btn-lg btn-primary btn-block" id="submit" type="submit" style="background-color: #40E0D0">登录</button>
        		 <div  style="color: red; width: 300px;height: 30px" >
        		 	<h4 id="prompt">
        		 		<c:choose>
        		 			<c:when test="${activeTips!=null }">
        		 				${activeTips }
        		 			</c:when>
        		 			<c:when test="${activeTips==null }"></c:when>
        		 		</c:choose>
        		 	</h4>
        		 </div>
        		 <div class="go-login login-form">
		      			<p class="muted text-center">没有账号？点击 <a class="goLogin" href="user-regist.jsp">注册&gt;&gt;</a></p>
		    	</div>
     		</form>
		</div>
	</div>
	<script type="text/javascript">
		function checkNameAndPass(){ //用ajax判断输入的用户名密码是否正确
			
			var email = document.getElementById("userEmail").value;
			var pass = document.getElementById("userPass").value;
			$.ajax({
				url:'../UserServlet?op=checkUserNameAndPass',
				type: 'post',
				data:{'email':email,'pass':pass},
				success: function(data){
					if(data === 'emailError'){
						document.getElementById("prompt").innerHTML="请输入正确邮箱!";
						document.getElementById("formId").action="";
						document.getElementById("submit").disabled="disabled";
					}else if(data === 'passError'){
						document.getElementById("prompt").innerHTML="输入正确密码!";
						document.getElementById("formId").action="";
						document.getElementById("submit").disabled="disabled";
					}else if(data === 'ok'){
						document.getElementById("prompt").innerHTML="账号密码匹配成功!";
						document.getElementById("submit").disabled="";
						document.getElementById("formId").action= "../UserServlet?op=userLogin";
					} 
				}
			});
		}
	
	
	</script>
	
</body>
</html>